<template>
  <div class="yxp-course">
    <div class="yxp-composition-top">
      <div class="back" @click="handleBack">
        <span></span>
      </div>
      <div class="yxp-top-c">训练报告</div>
      <div class="yxp-top-r"></div>
    </div>
    <div class="yxp-scene-main">
      <div class="main-box">
        <div class="main-box-content">
          <div class="content">
            <div class="content-wrap upload-box" >
              <h3 class="work-title">【写作要求】</h3>
              <div class="work-info" v-html="detailInfo.require"></div>
            </div>
          </div>
        </div>
        <div class="main-box-content">
          <div class="content">
            <div class="arrow"></div>
            <div class="content-wrap detail-box">
              <div class="content-user">
                    <div class="content-user-item">
                        <img src="@/assets/composition/student-icon.png" class="student"/>
                        <span>学生：{{detailInfo.student_name}}</span>
                    </div>
                    <div class="content-user-item">
                        <img src="@/assets/composition/teach-icon.png" class="teach"/>
                        <span>老师：{{detailInfo.teacher}}</span>
                    </div>
                    <div class="content-user-item">
                        <img src="@/assets/composition/data-icon.png" class="date"/>
                        <span>日期：{{detailInfo.date}}</span>
                    </div>
                </div>
                <div class="content-answer">
                  <h3 class="content-answer-title">
                    <img src="@/assets/composition/upload-star.png" />我的答案
                  </h3>
                  <div class="content-answer-main answer-img">
                    <div class="audio-btn" v-if="playing" id="yxp-result-play" @click="handlePause(1)">
                      <img src="@/assets/composition/read-pause-icon.png" />我的录音
                    </div>
                    <div class="audio-btn" v-if="!playing" id="yxp-result-play1" @click="handlePlay(1)">
                      <img src="@/assets/composition/read-play-icon.png" />我的录音
                    </div>
                    <div class="audio-img" v-if="detailInfo.pic !== null && detailInfo.pic !== ''">
                      <img :src="detailInfo.pic" />
                    </div>
                  </div>
                </div>
                <!--audio-->
                <div class="content-answer">
                  <h3 class="content-answer-title">
                    <img src="@/assets/composition/upload-star.png" />标准模型
                  </h3>
                  <div class="content-answer-main answer-text">
                    <div class="audio-btn" v-if="defaultPlaying" id="yxp-result-pause" @click="handlePause(2)">
                      <img src="@/assets/composition/read-pause-icon.png" />原文录音
                    </div>
                    <!-- <div class="audio-img">
                      <img src="" />
                    </div> -->
                    <div class="audio-btn" v-if="!defaultPlaying" id="yxp-result-pause1" @click="handlePlay(2)">
                      <img src="@/assets/composition/read-play-icon.png" />原文录音
                    </div>
                    <div class="audio-img">
                      <template>
                        <template v-if="articleType === 1 || articleType === 5">
                          <span v-html="enHead"  :style="{display: 'block',color: '#333'}"></span>
                          <span v-for="(item,i) in enText" :key="'e' + i"  v-html="item"></span>
                          <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden'}"></span>
                        </template>
                        <template v-else-if="articleType === 2">
                          <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
                          <span v-for="(item,i) in enText" :key="'e' + i" v-html="item"></span>
                          <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden'}"></span>
                        </template>
                        <template v-else-if="articleType === 3">
                          <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
                          <span v-for="(item,i) in enText" :key="'e' + i" v-html="item"></span>
                        </template>
                        <template v-else-if="articleType === 4">
                          <span v-html="enHead" :style="{display: 'block',color: '#333'}"></span>
                          <span v-for="(item,i) in enText" :key="'e' + i" v-html="item"></span>
                        </template>
                        <template v-else>
                          <span v-for="(item,i) in enText" :key="'e' + i" v-html="item"></span>
                        </template>
                      </template>
                    </div>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="yxp-upload-audio" v-if="personVoice">
        <span>{{ seekDuration | mmssFilter }}</span>
        <a-slider  class="voice-range" :value="sliderPercentage"></a-slider>
        <span>{{ audioDuration | mmssFilter }}</span>
      </div>
    <div class="yxp-upload-audio" v-if="defaultVoice">
        <span>{{ seekDuration1 | mmssFilter }}</span>
        <a-slider  class="voice-range" :value="sliderPercentage1"></a-slider>
        <span>{{ audioDuration1 | mmssFilter }}</span>
      </div>
    <div class="mark" v-if="isShow"></div>
    <BackTips title="是否退出？" :isBack="isBack" :courseId="courseId" :courseType="course_type" type="9" :modal="modal" @close="handleClosed"/>
    <div class="yxp-upload-code" v-if="isShow">
      <img src="" class="code" />
    </div>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import { Slider } from "ant-design-vue"
import BackTips from '../components/BackTips.vue'
import Timetips from '@/components/Timetips.vue'
import { Howl } from "howler"
import{ reportDetail } from '@/services/composition.js'
export default {
  name: 'uploadResult',
  components: {
    ASlider: Slider,
    BackTips,
    Timetips
  },
  data () {
    return {
      title: '英语习得与切片训练',
      modelArr: ['要点解读','查看模型'],
      content:'',
      model: -1,
      id: 0,
      course_type: 0,
      courseId: 0,
      type: 1,
      enText: [],
      iNow: -1,
      iStep: -1,
      isShow: false,
      isOpen: false,
      isBack: false,
      isNext: false,
      popTitle: '开始格式塔全文还原训练吧~',
      isEn: false,
      playing: false,
      defaultPlaying: false,
      project_voice: '',
      detailInfo: {},
      voice: '',
      rightVoice: '',
      sentence: [],
      articleType: 0,
      seekTimer: null,
      seekTimer1: null,
      seekDuration: 0,
      seekDuration1: 0,
      audioDuration: 0,
      audioDuration1: 0,
      personVoice: false,
      defaultVoice: false,
      modal: 0
    }
  },
  computed: {
    sliderPercentage: function() {
      return this.seekDuration < 1 ? 0 : Math.ceil((this.seekDuration / this.audioDuration) * 93)+7;
    },
    sliderPercentage1: function() {
      return this.seekDuration1 < 1 ? 0 : Math.ceil((this.seekDuration1 / this.audioDuration1) * 93)+7;
    }
  },
  created () {
    if (this.$route.query.id) {
      let { id, course_type, modal,courseId } = this.$route.query
      this.id = +id
      this.course_type = +course_type
      this.modal = +modal
      this.courseId = +courseId
    }
    this.getDetail()
  },
  methods: {
    getDetail () {
      reportDetail({ id: this.id }).then(data => {
        if (data.code === 1 && data.data) {
          this.detailInfo = data.data
            console.log('this.voice------', data)
          this.voice = data.data.voice
          this.rightVoice = data.data.right_answer.voice
          this.sentence = data.data.sentence
          this.articleType = data.data.type
          let enText = this.sentence
          let enArr = []
          let vm = this;
        
          this.audio = new Howl({
            src: this.voice,
            html5: true,
            onplay: function() {
              vm.playing = true;
              vm.seekTimer = setInterval(() => {
                vm.audioDuration = this.duration();
                vm.seekDuration = this.seek();
              }, 1000);
            },
            onload: function() {
              vm.audioDuration = this.duration();
            },
            onpause: function() {
              vm.playing = false;
              vm.personVoice = false
            },
            onend: function() {
              console.log("end");
              vm.playing = false;
              vm.personVoice = false
              vm.defaultVoice = false
              clearInterval(vm.seekTimer)
            }
          });
          this.audio1 = new Howl({
            src: this.rightVoice,
            html5: true,
            onplay: function() {
              vm.defaultPlaying = true;
              vm.seekTimer1 = setInterval(() => {
                vm.audioDuration1 = this.duration();
                vm.seekDuration1 = this.seek();
              }, 1000);
            },
            onload: function() {
              vm.audioDuration1 = this.duration();
            },
            onpause: function() {
              vm.defaultPlaying = false;
              vm.defaultVoice = false;
            },
            onend: function() {
              console.log("ends");
              vm.defaultPlaying = false;
              vm.defaultVoice = false
              clearInterval(vm.seekTimer1)
            }
          });
          if (this.articleType === 1 || this.articleType === 5 || this.articleType === 2) {
            this.enHead = enText.splice(0,1).join('').replace('##','')
            this.enEnd = enText.pop()
            if (this.enEnd.indexOf('##')) {
              this.enEnd = this.enEnd.replace('##','<br/>')
            }
          } else if (this.articleType === 3 || this.articleType === 4) {
            this.enHead = enText.splice(0,1).join('').replace('##','')
          }
          enText.map(item =>{
            if (item.indexOf('&&') !== -1 || item.indexOf('##') !== -1) {
              let val = item.replace('&&', '&nbsp;&nbsp;&nbsp;&nbsp;').replace('##','<br>')
              enArr.push(val)
            } else {
              enArr.push(item)
            }

          })
          this.enText = enArr
        }
      })
    },
    // 播放语音
    handlePlay (type) {
      console.log(type)
      if (type === 1) {
      
        if (this.voice) {
          this.defaultVoice = false
          this.defaultPlaying = false
          this.playing = true
          this.personVoice = true
          if (this.audio1) {
            this.audio1.pause()
          }
          this.audio.play()
        }else {
          console.log('没有可播放的音频')
        }


      } else {
        if (this.rightVoice !== '') {
          this.defaultVoice = true
          this.defaultPlaying = true
          this.playing = false
          this.personVoice = false
          if (this.audio) {
            this.audio.pause()
          }
          this.audio1.play()
        }
      }
    },
    handlePause (type) {
     if (type === 1) {
       this.audio.pause()
     } else {
       this.audio1.pause()
     }
    },
    handleBack () {
      this.isBack = true
    },
    handleClosed (val) {
      this.isBack = val
    }
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
}
</script>
<style lang='less' scoped>
  .yxp-scene-main {
    .main-box {
      &-content {
        .content {
          .upload-box {

            .work-title {
              padding-top:2px !important;
            }
          }
          .detail-box {

          }
          &-user {
            display: flex;
            justify-content: start;
            align-items: center;
            flex-wrap: wrap;
            border: 1px solid #D9DFE5;
            border-radius: 6px;
            padding: 21px 0;
            &-item {
              display: flex;
              align-items: center;
              margin: 2px 20px;
              font-size:16px;
              font-family:Microsoft YaHei;
              font-weight:400;
              color: #333;
              img {
                display: inline-block;
                vertical-align: middle;
                margin-right: 6px;
              }
              .student {
                width: 13px;
                height: 16px;
                margin: 0 5px 0 2px;
              }
              .date {
                width: 18px;
                height: 18px;
              }
              .teach {
                width: 16px;
                height: 16px;
              }
            }
          }
          &-answer {
            margin-top: 32px;
            &-title {
              font-size:30px;
              font-family:Microsoft YaHei;
              font-weight:bold;
              color: #333;
              text-align: center;
              img {
                width: 29px;
                height: 36px;
                margin-right: 13px;
              }
            }
            .answer-img {
              padding: 30px 0;
            }
            &-main {
              background: #F0F7F6;
              border-radius: 10px;
              margin-top: 22px;
              .audio-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 180px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size:20px;
                font-family:Microsoft YaHei;
                font-weight:bold;
                color: #27BFA3;
                border: 1px solid #27BFA3;
                border-radius: 6px;
                margin: 0 auto;
                cursor: pointer;
                &:hover {
                  background-color: #e9f9f6;
                }
                img {
                  width: 24px;
                  height: 24px;
                  margin-right: 10px;
                }
              }
            }
            .answer-img {
              .audio-img {
                  text-align: center;
                  padding: 0 72px 0 68px;
                  img {
                    display: inline-block;
                    width: 100%;
                    height: auto;
                    margin: 19px auto;
                  }
                }
            }
            .answer-text {
              padding-top: 10px;
              background: #fff;
              .audio-img {
                  font-size:20px;
                  font-family:Microsoft YaHei;
                  font-weight:400;
                  color: #333;
                  margin-top: 20px;
                  img {
                    width: 500px;
                    height: 374px;
                    margin: 19px auto 30px;
                  }
                  span {
                    word-break: break-word;
                  }
                }
            }
          }
        }
      }
    }
  }
  .yxp-upload-code {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 500px;
    height: 663px;
    background: url(../../../assets/composition/upload-code.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1200;
    img {
      width: 400px;
      height: 400px;
      margin: 213px 50px 50px;
    }
  }
  .yxp-upload-audio {
    position: fixed;
    bottom: 50px;
    display: flex;
    align-items: center;
    .ms {
      font-size:16px;
      font-family:Microsoft YaHei;
      font-weight:400;
      color: #27BFA3;
    }
    .voice-range {
      // width: 627px;
      margin: 0 10px;
    }
  }
  @media screen and (max-width: 1200px) {
  .yxp-upload-audio {
    right: calc((100% - 950px) / 2);
    bottom: 20px;
    .voice-range {
      width: 362px;
    }
  }
}
@media screen and (min-width: 1200px) and (max-width: 1620px) {
  .yxp-upload-audio {
    right: calc((100% - 1180px) / 2);
    bottom: 20px;
    .voice-range {
      width: 478px;
    }
  }
}
@media screen and (min-width: 1620px) {
  .yxp-upload-audio {
    right: calc((100% - 1440px) / 2);
    bottom: 50px;
    .voice-range {
      width: 600px;
    }
  }
}
</style>
